import type { ReactElement } from 'react';
import React from 'react';
import {
  Typography,
  TypographyColor,
  TypographyType,
} from '../typography/Typography';
import { ArrowIcon, InfoIcon } from '../icons';
import { IconSize } from '../Icon';
import { FlexCol, FlexRow } from '../utilities';
import { Tooltip } from '../tooltip/Tooltip';

interface ProgressStep {
  label: string;
  count: number;
  info: string;
}

const steps: ProgressStep[] = [
  { label: 'Matched', count: 12000, info: 'Some information about this step' },
  { label: 'Reached', count: 0, info: 'Some information about this step' },
  { label: 'Considered', count: 0, info: 'Some information about this step' },
  { label: 'Decided', count: 0, info: 'Some information about this step' },
  { label: 'For review', count: 0, info: 'Some information about this step' },
  { label: 'Introduced', count: 0, info: 'Some information about this step' },
];

export const ConnectProgress = (): ReactElement => {
  return (
    <FlexRow className="items-center p-4">
      {steps.map((step, index) => (
        <React.Fragment key={step.label}>
          <Tooltip content={step.info}>
            <div className="flex flex-1 flex-row justify-between gap-1 rounded-16 border border-border-subtlest-tertiary bg-background-default px-4 py-2">
              <FlexCol className="gap-1">
                <Typography
                  type={TypographyType.Footnote}
                  color={TypographyColor.Tertiary}
                >
                  {step.label}
                </Typography>
                <Typography type={TypographyType.Title3} bold>
                  {step.count}
                </Typography>
              </FlexCol>
              <InfoIcon size={IconSize.Size16} className="text-text-tertiary" />
            </div>
          </Tooltip>

          {index < steps.length - 1 && (
            <div className="z-3 -mx-2 flex items-center rounded-10 border border-border-subtlest-tertiary bg-background-default p-0.5">
              <ArrowIcon
                size={IconSize.Small}
                className="rotate-90 text-text-tertiary"
              />
            </div>
          )}
        </React.Fragment>
      ))}
    </FlexRow>
  );
};
